<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#app{
			margin: 0 auto;
			width: 500px;
		}
		ul li{
			height: 2em
		}
	</style>
</head>
<body>
	<div id="app">
		<input type="text" name="" v-model='value' v-on:keyup.enter='add' ref='textbox'>
		<button v-on:click='add'>添加</button>

		<ul>
			<li v-for="(item,index) in person" :key='index'>
				{{index + 1}}-{{item}} 
				<button v-on:click='delFn(index)'>删除</button>
			</li>
		</ul>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				person:['小明','小红'],
				value:''
			},
			methods:{
				add:function () {
					if (this.value != '') {
						this.person.push(this.value)
						this.value = ''
					}else{
						alert('请输入名字');
						console.log(this.$refs.textbox)
						this.$refs.textbox.focus();
					}
					
				},
				delFn:function (index) {
					console.log(index);
					this.person.splice(index,1);
				}
			}

		})
	</script>
</body>
</html>